<template>
  <div class="sub-filter">
    <div v-if="list.length">
      <div class="item" v-for="item in list" :key="item.id">
        <div class="head">{{ item.name }}：</div>
        <div class="body">
          <!-- 点击高亮效果 -->
          <!-- @click="item.activeId = p.id" -->
          <!-- :class="{ active: item.activeId === p.id }" -->
          <a
            href="javascript:;"
            @click="getVal(item, undefined)"
            :class="{ active: item.activeId === undefined }"
            >全部</a
          >
          <a
            href="javascript:;"
            @click="getVal(item, p.id)"
            :class="{ active: item.activeId === p.id }"
            v-for="p in item.properties"
            :key="p.id"
            >{{ p.name }}</a
          >
        </div>
      </div>
    </div>
    <!-- 骨架屏 -->
    <div v-else class="sub-filter">
      <div style="display: flex">
        <XtxSkeleton class="item" width="80px" height="40px" /><XtxSkeleton
          class="item"
          width="500px"
          height="40px"
        />
      </div>
      <div style="display: flex">
        <XtxSkeleton class="item" width="80px" height="40px" /><XtxSkeleton
          class="item"
          width="800px"
          height="40px"
        />
      </div>
      <div style="display: flex">
        <XtxSkeleton class="item" width="80px" height="40px" /><XtxSkeleton
          class="item"
          width="600px"
          height="40px"
        />
      </div>
      <div style="display: flex">
        <XtxSkeleton class="item" width="80px" height="40px" /><XtxSkeleton
          class="item"
          width="200px"
          height="40px"
        />
      </div>
      <div style="display: flex">
        <XtxSkeleton class="item" width="80px" height="40px" /><XtxSkeleton
          class="item"
          width="700px"
          height="40px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { findSubCategoryFilter } from '@/api/category.js'
import { useRoute } from 'vue-router'
import { watch, ref } from 'vue'
export default {
  name: 'SubFilter',
  setup (props, { emit }) {
    const route = useRoute()
    const list = ref([])
    // 获取数据
    const getFilters = async (id) => {
      const { result } = await findSubCategoryFilter(id)
      // 处理数据格式
      list.value = [
        { id: null, name: '品牌', properties: result.brands },
        ...result.saleProperties
      ]
    }
    // 监听路由变化
    watch(
      () => route.params.id,
      (id) => {
        // 判断路由id是否一致
        if (route.path === `/category/sub/${id}`) {
          getFilters(id)
        }
      },
      // 立即触发
      { immediate: true }
    )

    // 后端所需数据
    // attrs:[{groupName:'属性组名称',propertyName:'属性值名称'}]
    const attrs = []
    let brandId
    const getVal = (item, id) => {
      // 点击高亮效果
      item.activeId = id
      // 判断字段是否是“品牌”
      if (item.name === '品牌') {
        brandId = id
      } else {
        // 判断有值修改，无值新增
        const index = attrs.findIndex((val) => val.groupName === item.name)
        if (index === -1) {
          attrs.push({ groupName: item.name, propertyName: id })
        } else {
          attrs[index].propertyName = id
        }
      }
      const filterData = {}
      if (brandId !== undefined) {
        filterData.brandId = id
      }
      filterData.attrs = attrs.filter((i) => i.propertyName !== undefined)
      emit('filter-sort', filterData)
    }
    return { list, getVal }
  }
}
</script>

<style scoped lang='less'>
.xtx-skeleton {
  padding: 10px;
}
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}
</style>
